/*
 * @Author: xiaosihan 
 * @Date: 2023-11-26 16:20:44 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-30 05:47:11
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./scrollContainer.module.less";
import utils from "@/utils/utils";
// import threeUtils from "three-base/threeUtils";
import globalStore from "@/srcWeb/globalStore";
import clsx from "clsx";
import threeUtils from "three-base/threeUtils";

interface Iprops {
    width?: number; // 1920
    height?: number; // 1080
    children?: ReactNode
}

// 大屏滚动容器
export default function ScrollContainer(props: Iprops) {


    // 显示模式分为适应和横向滚动2种 scale | full
    // 地址上的参数来确定
    const displyModel = utils.getQueryString("displyModel") === "scale" ? "scale" : "full" as "scale" | "full";

    const scrollDom = useRef<HTMLDivElement | null>(null);
    const innerDom = useRef<HTMLDivElement | null>(null);
    const scaleDom = useRef<HTMLDivElement | null>(null);

    const [data, setData] = useState({});

    const width = props.width || 1920;
    const height = props.height || 1080;

    useEffect(() => {
        if (scrollDom.current) {
            scrollDom.current.scrollLeft = localStorage["scrollContainer_scrollLeft"] || 0;
        }
    }, []);

    useEffect(() => autorun(() => {

    }), []);

    useEffect(() => autorun(() => {
        const { height } = globalStore;
        if (scaleDom.current) {
            const s = ((height - 20) / 1080);
            scaleDom.current.style.transform = `scale(${s})`;
        }
        if (innerDom.current) {
            const s = ((height - 20) / 1080);
            innerDom.current.style.width = (displyModel === "full") ? '100%' : `${s * width}px`;
            innerDom.current.style.height = (displyModel === "full") ? '100%' : `${height - 20}px`;
        }
    }), []);

    return (
        <div
            ref={scrollDom}
            className={clsx(styles.scrollContainer, (displyModel === "full") && styles.prod)}
            onScroll={e => {
                localStorage["scrollContainer_scrollLeft"] = (e.target as HTMLDivElement).scrollLeft;
            }}
        >
            <div
                ref={innerDom}
                className={styles.scrollInner}

            >
                <div
                    style={{ width, height }}
                    ref={(displyModel === "full") ? scaleDom => threeUtils.keepZoom(scaleDom, width, height) : scaleDom}
                    className={clsx(styles.scale_container, (displyModel === "full") && styles.prod)}
                >
                    {props.children}
                </div>
            </div>
        </div>
    );

}